export default function Home() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex flex-col items-center justify-center p-4">
      <div className="bg-white rounded-2xl shadow-xl p-8 max-w-2xl w-full transform transition-all hover:scale-105 duration-300">
        <div className="text-center">
          <h1 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600 mb-4">
            Tailwind CSS 配置测试
          </h1>
          
          <div className="flex justify-center space-x-4 mb-6">
            <div className="w-12 h-12 bg-primary-500 rounded-lg flex items-center justify-center text-white font-bold">
              P
            </div>
            <div className="w-12 h-12 bg-secondary-500 rounded-lg flex items-center justify-center text-white font-bold">
              S
            </div>
          </div>
          
          <p className="text-gray-600 mb-6">
            如果您能看到这个带有渐变背景、阴影和悬停效果的卡片，说明Tailwind CSS配置已成功生效！
          </p>
          
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
            {['xs', 'sm', 'md', 'lg'].map((breakpoint) => (
              <div 
                key={breakpoint}
                className={`p-3 rounded-lg text-center font-medium
                  ${breakpoint === 'xs' ? 'bg-red-100 text-red-800' : ''}
                  ${breakpoint === 'sm' ? 'bg-blue-100 text-blue-800' : ''}
                  ${breakpoint === 'md' ? 'bg-green-100 text-green-800' : ''}
                  ${breakpoint === 'lg' ? 'bg-purple-100 text-purple-800' : ''}
                `}
              >
                {breakpoint}
              </div>
            ))}
          </div>
          
          <div className="inline-block bg-gradient-to-r from-primary-500 to-secondary-500 text-white px-6 py-3 rounded-full font-bold shadow-lg hover:shadow-xl transition-all">
            配置成功！
          </div>
        </div>
      </div>
      
      <div className="mt-8 text-center text-gray-500 text-sm">
        <p>自定义颜色、断点和容器配置均已启用</p>
      </div>
    </div>
  );
}